<!--
 * @Description:  recorded - 观看课程
 * @Author: your name
 * @Date: 2024-02-24
 * @LastEditTime: 2024-02-24
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="simpleModel" v-if="isFocus">
    <div class="pageHeader">
      <router-link class="back" to="courseOutline" tag="a">
        <img src="@/assets/images/back.png" alt="" />
        <span>返回课程大纲</span>
      </router-link>
    </div>
    <div
      id="videoBox"
      :class="{ videocontent: !isquan, allvideo: isquan }"
    ></div>
    <div class="cataloguelist" :class="{ havelist: !isquan, nolist: isquan }">
      <ul class="fixedRight">
        <li @click="openmulu(1)">
          <img src="@/assets/images/_list.png" alt="" />
          <span>目录</span>
        </li>
        <li @click="openmulu(2)">
          <img src="@/assets/images/logo_jy.png" alt="" />
          <span>讲义</span>
        </li>
        <li @click="openmulu(4)">
          <img src="@/assets/images/logo_bj.png" alt="" />
          <span>笔记</span>
        </li>
        <li @click="openmulu(5)">
          <img src="@/assets/images/logo_tw.png" alt="" />
          <span>提问</span>
        </li>
      </ul>

      <!-- 视频目录 -->
      <div class="noteBox videoBox" v-if="showId == 1">
        <h5 class="tit">目录</h5>
        <div class="list">
          <div class="item" v-for="(item, index) in 3" :key="index">
            <h5
              :class="{ active: idx == index }"
              @click="nextPlayer(index, item.dir_id, item.task_id)"
            >
              M3-1 Understanding Income Statements
            </h5>
          </div>
        </div>
        <div @click="closemulu()" class="closeBtn">
          <img src="@/assets/images/arrRight.png" alt="" />
        </div>
      </div>

      <!-- 讲义 -->
      <div class="noteBox handouts" v-if="showId == 2">
        <h5 class="tit">讲义</h5>
        <div class="jyList">
          <!-- <div
            class="item"
            v-for="(item, index) in lecturelist"
            :key="'lecturelist' + index"
          >
            <h5>{{ item.name }}</h5>
            <div class="right">
              <a :href="item.url" target="_bank">
                <img src="@/assets/images/logo_download.png" alt="" />
              </a>
            </div>
          </div> -->
        </div>
        <div @click="closemulu()" class="closeBtn">
          <img src="@/assets/images/arrRight.png" alt="" />
        </div>
        xx
      </div>

      <!-- 笔记列表 -->
      <div class="noteBox" v-if="showId == 4">
        <div class="top">
          <div class="left">
            <img src="@/assets/images/note_list.png" alt="" />
            <span>笔记</span>
          </div>
          <p @click="addnote_video()">添加笔记</p>
        </div>
        <div class="noteList" v-if="notelist.length >= 1">
          <!-- <div
            class="item"
            v-for="(item, index) in notelist"
            :key="'notelist' + index"
            @click="jump_play(item.times)"
          >
            <h5 class="time">
              {{
                (parseInt(item.times / 60) <= 9
                  ? '0' + parseInt(item.times / 60)
                  : parseInt(item.times / 60)) +
                ':' +
                (parseInt(item.times % 60) <= 9
                  ? '0' + parseInt(item.times % 60)
                  : parseInt(item.times % 60))
              }}
            </h5>
            <div
              v-for="(imgs, index) in item.note_images"
              :key="'imgs' + index"
            >
              <img :src="imgs" alt="" />
            </div>
            <p v-html="item.content"></p>
            <span>{{ item.addtime }}</span>
          </div> -->
        </div>
        <div class="noteList" v-if="notelist.length == 0">
          <p>暂无数据</p>
        </div>
        <div @click="closemulu()" class="closeBtn">
          <img src="@/assets/images/arrRight.png" alt="" />
        </div>
      </div>

      <!-- 提问列表 -->
      <div class="noteBox" v-if="showId == 5">
        <div class="top">
          <div class="left">
            <img src="@/assets/images/icon_ask.png" alt="" />
            <span>我的提问</span>
          </div>
          <p @click="addanswer_video()">添加提问</p>
        </div>
        <div class="noteList" v-if="answerlist.length >= 1">
          <!-- <div
            class="item"
            v-for="(item, index) in 3"
            :key="'answerlist' + index"
            @click="jump_play(item.times)"
          >
            <h5 class="time">
              {{
                (parseInt(item.times / 60) <= 9
                  ? '0' + parseInt(item.times / 60)
                  : parseInt(item.times / 60)) +
                ':' +
                (parseInt(item.times % 60) <= 9
                  ? '0' + parseInt(item.times % 60)
                  : parseInt(item.times % 60))
              }}
            </h5>
            <div v-for="(imgs, index) in item.images" :key="'imgs' + index">
              <img :src="imgs" alt="" />
            </div>
            <p v-html="item.question_title"></p>
            <span>{{ item.addtime }}213</span>
          </div> -->
        </div>
        <div class="noteList" v-if="answerlist.length == 0">
          <p>暂无数据</p>
        </div>
        <div @click="closemulu()" class="closeBtn">
          <img src="@/assets/images/arrRight.png" alt="" />
        </div>
      </div>

      <!-- 添加提问 -->
      <div class="addBox addAsk" v-if="addAskShow">
        <img
          @click="addAskShow = false"
          class="closeBtn"
          src="@/assets/images/logo_close.png"
          alt=""
        />
        <h5>添加提问</h5>
        <div class="noteInfo notecontent">
          <div id="myCanvas">
            <img :src="imgSrc" alt="" />
          </div>
          <div>
            <span>提问内容：</span>
            <textarea
              type="textarea"
              class="infoBox"
              placeholder="请输入提问内容"
              v-model="askInfo"
              maxlength="200"
              show-word-limit
              resize="none"
              style="width: 350px; height: 74px"
            >
            </textarea>
          </div>
        </div>
        <div class="btns">
          <button @click="addanswer_plan()">确定</button>
          <button @click="addAskShow = false">取消</button>
        </div>
      </div>

      <!-- 添加笔记 -->
      <div class="addBox addAsk" v-if="addNodeShow">
        <img
          @click="addNodeShow = false"
          class="closeBtn"
          src="@/assets/images/logo_close.png"
          alt=""
        />
        <h5>添加提问</h5>
        <div class="noteInfo notecontent">
          <div id="myCanvas">
            <img :src="imgSrc" alt="" />
          </div>
          <div>
            <span>提问内容：</span>
            <textarea
              type="textarea"
              class="infoBox"
              placeholder="请输入提问内容"
              v-model="askInfo"
              maxlength="200"
              show-word-limit
              resize="none"
              style="width: 350px; height: 74px"
            >
            </textarea>
          </div>
        </div>
        <div class="noteInfo" style="align-items: center">
          <span style="margin-top: -3px">公开笔记：</span>
          <el-radio-group v-model="isPublic">
            <el-radio :label="1" style="margin-right: 20px">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </div>
        <div class="btns">
          <button @click="addnote_plan()">确定</button>
          <button @click="addNodeShow = false">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
function onCCH5PlayerLoaded() {
  window.ccH5PlayerJsLoaded = true
}
</script>
<script src="https://p.bokecc.com/player?siteid=F2DE604AF16F674F&newversion=true"></script>
<script>
import { getTaskListForDay } from '@/api/newzhike/courseOutline'
export default {
  name: 'recorded',
  data() {
    return {
      showId: 0,
      isFocus: true,
      isquan: true, //视频全屏
      idx: 0, // 当前 视频下表
      answerlist: [], // 问题列表
      videolist: [], // 目录列表
      notelist: [], // 笔记列表
      lecturelist: [], //讲义列表
      noteInfo: '', // 笔记内容
      askInfo: '', //问题内容
      addAskShow: false,
      addNodeShow: false,
      isPublic: -1,
      imgSrc: '', // 点击笔记截图
      list: [
        'C56ED7D0C11A8288753C612EB38A8D5A',
        'A392C8BAB92053507E6C9CEE8B422289',
        'A392C8BAB92053500498CE5AAF1F53F5'
      ] //视频播放器
    }
  },
  created() {
    if (window.ccH5PlayerJsLoaded) {
      this.createPlayer()
    }
    this.setPlayerCallBack()

    getTaskListForDay({ day: '2024-04-19', combo_id: 2 }).then(
      ({ data: data }) => {
        console.log(data)
      }
    )
  },
  mounted() {
    this.createPlayer()
  },
  methods: {
    openmulu(val) {
      this.showId = val
      if (this.isquan) {
        this.isquan = !this.isquan
      }
    },
    closemulu() {
      this.isquan = !this.isquan
      this.showId = 0
    },
    // 添加笔记
    addnote_video() {},
    // 添加提问
    addanswer_video() {},
    addanswer_plan() {},
    //播放器相关方法
    createPlayer() {
      this.test = document.getElementById('videoBox')
      if (this.idx >= this.list.length) this.idx = 0
      console.log(this.idx, 'createPlayer前')
      this.player = window.createCCH5Player({
        vid: this.list[this.idx],
        siteid: 'F2DE604AF16F674F',
        autoStart: true,
        width: '100%',
        height: '100%',
        closeHistoryTime: 0,
        preventKeyboardEvent: false,
        parentNode: this.test
      })
      this.PlayerLoaded = true
      //this.idx++;
      console.log(this.PlayerLoaded, 'createPlayer后', this.last_time)
    },
    // 下一个
    nextPlayer() {
      this.player && this.player.destroy()
      this.createPlayer()
    },
    destroyed() {
      this.player && this.player.destroy()
    },
    setPlayerCallBack() {
      window.onCCH5PlayerLoaded = this.onCCH5PlayerLoaded
      window.on_CCH5player_ready = this.onPlayerReady
      window.on_player_volumechange = this.onPlayerVolumeChange
    },
    onCCH5PlayerLoaded() {
      window.ccH5PlayerJsLoaded = true
      this.createPlayer()
    },
    onPlayerReady(obj) {
      console.log('CCH5player_ready', obj)
      window.cc_js_Player.setVolume(0.3)
    },
    onPlayerVolumeChange(volume, vid) {
      console.log('设置音量回调:  ', volume, vid)
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
// @import '@/assets/styles/global.scss';
@import '@/assets/styles/recorded.scss';
</style>
